import React from "react";
import {
  Node,
  createOutline,
  ReactEditor,
  useEditorKit
} from "@mpkelly/react-editor-kit";

export interface OutlineProps {
  nodes: Node[];
}

//Paper's Outline component - the 3 minute version

export const Outline = (props: OutlineProps) => {
  const outline = createOutline(props.nodes, ["fixed-title", "h3"]);
  const { editor } = useEditorKit();
  const handleClick = (node: Node) => {
    const element = ReactEditor.toDOMNode(editor, node);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
    }
  };
  return (
    <div className="outline">
      {outline
        .filter(outline => outline.content)
        .map(entry => {
          const width = entry.node.type === "fixed-title" ? 30 : 20;
          return (
            <div
              key={entry.content}
              className="outline-entry"
              style={{ width }}
              onClick={() => handleClick(entry.node)}
            >
              <span>{entry.content}</span>
            </div>
          );
        })}
    </div>
  );
};
